<template>
  <!-- 共享市场 -->
  <div class="app-container">
    <div class="gongxiang-box" v-loading="loading">
      <div class="flex alc">
        <div>
          <subtit title="共享市场"></subtit>
        </div>
        <div class="order-btns">
          <el-button @click="openOrderDialog" type="primary" plain>订单管理</el-button>
        </div>
      </div>

      <div class="yys-box">
        <selectBtnVue :options="{
              valueKey: 'id',
              labelKey: 'name',
              itemWidth: '100px',
              itemHeight: '32px',
              limitShow: '100',
            }" :selected="currentYYSid" :list-data="carrierTypes" @change="selectYYSType"></selectBtnVue>
      </div>
      <!-- <div class="yys-box flex">
        <div v-for="item in carrierTypes" :key="item.key">{{ item.name }}</div>
      </div> -->
      <div class="tip">
        公告:仅限于游戏账号业务使用，如发现违规我们将关停账号，如有违法我们将报案处理。<br />
        免责声明:该服务由商家提供，平台不为任何商家进行担保。
      </div>
      <div class="shop-box flex" v-if="shopList&&shopList.length">
        <div v-for="(item,i) in shopList" :key="i" class="shop-item">
          <div class="top">
            <div class="tit flex alc">
              <i></i>
              <span>{{item.chuzufangName}}</span>
            </div>
            <div class="yunfei">
              <span v-if="getSetObj(item.settingsJson)&&getSetObj(item.settingsJson).fuwufeiType==2">用户承担服务费</span>
              <span v-else>商家承担服务费</span>
            </div>
            <div class="price-box">
              {{ getSetObj(item.settingsJson)?getSetObj(item.settingsJson).monthPrice||'--':'--' }}
              <span style="font-size: 14px;">元/卡/月</span>
            </div>
            <div class="kucun">
              库存剩余：{{ item.cot }}
            </div>
          </div>
          <div class="bot">
            <el-button style="width: 100px;" type="primary" @click="openQushiyong(item)">去使用</el-button>
          </div>
        </div>
      </div>
      <div v-else class="shop-box">
        <el-empty description="暂无商家共享"></el-empty>

      </div>
    </div>
    <addShiyong ref="addShiyong"></addShiyong>
    <shareOrderDialog ref="shareOrderDialog"></shareOrderDialog>
  </div>
</template>

<script>
import subtit from "@/components/indexComponents/subtit.vue";
import selectBtnVue from "../../../components/select-btn.vue";
import addShiyong from "./addShiyong.vue";
import shareOrderDialog from "./shareOrderDialog.vue";
import phoneApi from "../../../../../api/phoneManage";
export default {
  name: "Kaweigongxiang",
  components: { subtit, selectBtnVue, addShiyong, shareOrderDialog },
  data() {
    return {
      loading: false,
      currentYYSid: 1,
      shopList: [],
    };
  },
  created() {
    this.getList();
  },
  computed: {
    carrierTypes() {
      return this.$store.getters.gameYunyingshangList;
    },
    shopInfo() {
      return this.$store.getters.shopInfo;
    },
    getSetObj() {
      return (jsonstr) => {
        let result = null;
        if (jsonstr) {
          const obj = JSON.parse(jsonstr);
          if (obj[this.currentYYSid]) {
            result = obj[this.currentYYSid];
          }
        }
        return result;
      };
    },
  },
  methods: {
    // 获取列表
    async getList() {
      // this.loading = true;
      this.shopList = [];
      const res = await phoneApi.telLeaseDetailsGongxianglist({
        carrierId: this.currentYYSid,
      });
      // this.loading = false;
      if (res.data) {
        this.shopList = res.data;
      }
    },
    openOrderDialog() {
      this.$refs.shareOrderDialog.open();
    },
    openQushiyong(item) {
      // console.log("%c Line:116 🍣 item", "color:#b03734", item);
      if (item.chuzufangId == this.shopInfo.tenantId) {
        return this.$message.error("不能使用自己的卡位！");
      }
      // 打开去使用的弹出窗
      this.$refs.addShiyong.open(
        "add",
        item,
        this.getSetObj(item.settingsJson)
      );
    },
    // 运营商改变
    selectYYSType(e) {
      if (this.currentYYSid != e) {
        this.currentYYSid = e;
        // 获取商家列表
        this.getList();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.order-btns {
  margin-left: 20px;
}
.yys-box {
  margin-top: 15px;
  // div {
  //   color: #6c5dd3;
  //   border: 1px solid #6c5dd3;
  //   border-radius: 4px;
  //   padding: 5px 15px;
  //   margin-right: 10px;
  // }
}
.tip {
  color: #fa6400;
  // margin-top: 10px;
}
.shop-box {
  margin-top: 15px;
  flex-wrap: wrap;
  .shop-item {
    border: 1px solid #6c5dd3;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 20px;
    margin-bottom: 20px;
    width: 180px;
    height: 180px;

    .top {
      padding: 6px 10px;
      background: #6c5dd3;
      color: #fff;
      user-select: none;
      .tit {
        i {
          width: 8px;
          height: 8px;
          border-radius: 4px;
          background: #fff;
          margin-right: 3px;
        }
        span {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
      .yunfei {
        margin-top: 5px;
      }
      .price-box {
        font-size: 24px;
        text-align: center;
        margin: 8px 0 4px;
      }
      .kucun {
        text-align: center;
        margin-bottom: 6px;
      }
    }
    .bot {
      text-align: center;
      padding-top: 10px;
    }
  }
}
</style>